<template>
	<view class="page">
		<!-- #ifndef MP-TOUTIAO -->
		<custom-nav-bar title=""></custom-nav-bar>
		<!-- #endif -->
		<view class="loadingLayout" v-if="!单项组.length && !全了否">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="grid grid-cols-3 gap-1 q-pa-sm">
			<theme-item v-for="item in 单项组" :key="item.ID" :item="item"></theme-item>
		</view>
		<view class="loadingLayout" v-if="单项组.length || 全了否">
			<uni-load-more :status="全了否?'noMore':'loading'" :contentText="{contentnomore: '数据 全 在👆上面了'}"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onUnload, onReachBottom, } from "@dcloudio/uni-app"
	import * as util from '@/amtf/utils'
	import { 查商品 } from '@/api/api'

	const 单项组 = reactive([]);
	const 全了否 = ref(false)
	const req = reactive({
		page: 1,
		pageSize: 10,
	})

	// const 初始化 = async () => {
	// 	const res = await 查商品()
	// 	if (res.code === 0) {
	// 		dataSource.value = res.data
	// 	}
	// }
	// 是否加载中标记，用于防止滚动触底触发多次请求
	const isLoading = ref(false)
	const 初始化 = async () => {
		if (isLoading.value) return
		// 退出分页判断
		if (全了否.value === true) {
			return
			return uni.showToast({ icon: 'none', title: '没有更多数据~' })
		}
		// 发送请求前，标记为加载中
		isLoading.value = true
		// 发送请求
		// console.log('req: ', req);
		const res = await 查商品(req)
		// 发送请求后，重置标记
		isLoading.value = false
		if (res.code === 0) {
			// util.数组重予(单项组, res.data.list)
			const arr = res.data.list
			for (let 单项 of arr) {
				单项.图片 = util.予图片路径(单项.图片)
				单项.图片组 = 单项.图片组.map(item => {
					// console.log('处理路径后图片组item: ', item);
					return util.予图片路径(item)
				})
			}
			单项组.push(...arr)
		} else {
			console.log('出错了 购物车查 res: ', res);
		}

		// 分页条件
		if (req.page < res.data.total / req.pageSize) {
			// 页码累加，下次触底查下一页
			req.page++
		} else {
			全了否.value = true
		}
	}

	onLoad((e) => {
		初始化();
	})

	onReachBottom(() => {
		// if (全了否.value) return;
		// req.page++;
		初始化();
	})

	const 初始化fff = async () => {
		const res = await 查商品(req)
		if (res.code === 0 && res.data.list.length) {
			单项组.value.push(...res.data.list)
			uni.setStorageSync("商品", 单项组.value);
		} else {
			全了否.value = true
		}
	}
</script>

<style lang="scss" scoped>
	.liebiao {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15rpx;
	}
</style>